<template>
  <div class="box">
        <div class='app-container' :style="[{marginBottom: '-30px'}]">
  <el-form ref="form" label-width="80px" inline :model="form" >
  <el-form-item label="关键字" >
    <el-input v-model="form.id" palceholder='请输入'></el-input>
  </el-form-item>
 
 <el-form-item>
    <el-button type="primary" @click='delSearch' :style="[{backgroundColor : '#fff'}]">
      <span :style="{color : '#1f2326'}">清除</span>
      </el-button>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click='search'>查询</el-button>
  </el-form-item>


 <el-form-item :style="[{marginLeft: '600px'}]">
    <el-button type="primary" @click='XinZeng'>新增用户</el-button>
  </el-form-item>


  </el-form>       
   </div>


    <div :style="{margin: '10px'}">
    <el-alert
    title=""
    type="info"
    close-text = ' '
    > 
     <span :style="[{fontSize: '18px'}]">共 {{total}} 条记录</span>
    </el-alert>
    </div>
   

    <div class='app-container1'>
    <el-table style="width: 100%" :data='list1'>

      <el-table-column
      type="selection"
       width="255" 
      >
    </el-table-column>


      <el-table-column
        prop="title"
        label="用户名"
        
        >
      </el-table-column>

  
         <el-table-column
      prop="create_date"
      label="日期"
      sortable
      >
    </el-table-column>
        

      <el-table-column 
        label="操作">
        <template #default='{row}'>
          <el-button type="text" @click='xiuGai(row)'>修改</el-button>
          <el-button type="text" @click='del(row.id)'>删除</el-button>
        </template>
      </el-table-column>
      
    </el-table>
    </div>
   
       <!-- <users :text.sync='text'  :pageTitle.sync='pageTitle' :PermissionGroupsList.sync='PermissionGroupsList' :formBase.sync='formBase' :ruleInline.sync='ruleInline'></users> -->
        <users ref='users'></users>

      <div :style="{marginLeft: '750px'}">
         <el-pagination
  background
  layout="prev, pager, next,sizes,total"
  :total="total"
  :current-page.sync="params.page"
  :page-size.sync="params.pagesize"
  :page-sizes="[5,10,15,20]"
  @current-change='list'
  @size-change='list'
  >
</el-pagination>
   </div>

  </div>
</template>
 
<script>
  import users from '../components/permissionsAdd.vue'
  import {list , remove} from '../../api/base/permissions'

export default {
  components:{
    users
  },

  data () {
    return {
       form:{

       },
       list1:[],
      //  text:1,
      //  pageTitle:1,
      //  PermissionGroupsList:[],
      //  formBase:[],
      //  ruleInline:[],
        // currentPage: 1,
        // counts:1,
        // page:1,
        // pages:1,
        // pagesize:1,

        params: {
        page: 1,
        pagesize: 10
      },
      total: 0,
    }
  },

  created () {
    this.list()
  },

  methods: {
   async delSearch(){
        this.form = {}  
         this.list()  
    },
     async search(){
          const res =  await list({page:`1`,pagesize:'10'})
          const res1 = res.data.list.filter(item =>{
            return item.id == this.form.id
          })
           this.list1 = res1
     },
     //新增用户
     XinZeng(){
      console.log('1');
       this.$refs.users.centerDialogVisible = true
     },

    // 修改
     xiuGai(row){
      console.log(row);
       this.$refs.users.centerDialogVisible = true
      this.$refs.users.form = {...row}
      // this.$refs.users.this.$refs.tree.getCheckedNodes() 

     },

    //  删除
     async del(id){
     console.log(id);
      await this.$confirm('您确定删除该员工吗', '提示', {
      type: 'warning'
    }) 
    // remove
    await remove({id})
    this.$message.success('删除成功')
    this.list()
     },

      //  用户列表
      async list(){
      
      const res =  await list(this.params)
      
      console.log(res);
         console.log(res,'用户列表');
         this.list1 = res.data.list
         this.list1.map(item => {
           item.create_date = (JSON.stringify(item.create_date)).slice(1,11)
         })
        //  this.counts = res.data.counts
        //  this.page = res.data.page
        //  this.pages = res.data.pages
        //  this.pagesize = res.data.pagesize

 
        //  this.params.current = pages
        //  this.params.pageSize = res.data.pagesize
         this.tableData = res.data.list
         this.total = res.data.counts
      },

      //  handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      //   this.params.pageSize=val
      //   this.list()

      // },
      // handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      //    this.params.current=val
      //   this.list()
      // }
  }
}
</script>

<style scoped lang='less'>
   .box{
      background-color: #fff;
      margin: 10px;
   }
</style>